<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript Event loop</title>
</head>
<body>
  <script>
    /*
    宏任务(MacroTask)、微任务(MicroTask)

JavaScript 的任务不仅仅分为同步任务和异步任务，同时从另一个维度，也分为了宏任务(MacroTask)和微任务(MicroTask)。
先说说 MacroTask，所有的同步任务代码都是MacroTask（这么说其实不是很严谨，下面解释）,setTimeout、setInterval、I/O、UI Rendering 等都是宏任务。
MicroTask，为什么说上述不严谨我却还是强调所有的同步任务都是 MacroTask 呢，因为我们仅仅需要记住几个 MicroTask 即可，排除法！
别的都是 MacroTask。MicroTask 包括：Process.nextTick、Promise.then catch finally(注意我不是说 Promise)、MutationObserver。
    */

    console.log('script start')
    setTimeout(function(){
      console.log('setTimeout')
    },0)

    Promise.resolve().then(function(){
      console.log('promise1')
    }).then(function(){
      console.log('promise2')
    })

    console.log('script end')

    /*
    执行结果
    script start
    script end
    promise1
    promise2
    setTimeout

    先执行同步任务，再执行 Promise.then (MicroTask), 最后是setTimeout (MacroTask)
    */
  </script>
</body>
</html>